import React, {Component} from 'react';
import {Col, Row, Spin} from 'antd';
import '../css/register.css';
import {Back} from '../components/EditComponent';
import ss from '../image/qrcode.png';
import during from '../image/during.png';
import finish from '../image/finish.png';
import map from '../image/map.png';
import {Redirect} from 'react-router-dom';
import {config} from "../config";
import {order} from "../value";
import app from '../AppMethod';

//import map from '../image/map.png';

class DeliveryOrder extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            redirect: false,
            loading: false
        }
    };

    render() {
        if (this.state.redirect) {
            return <Redirect push to="/deliveryOrderDetail"/>; //or <Redirect push to="/sample?a=xxx&b=yyy" /> 传递更多参数
        }
        return (
            <div className="orderListContainer">
                <div>
                    <Back title="配送订单" back="true" click={()=>this.handleBack()}/>
                </div>
                <Spin spinning={this.state.loading}>
                    <div className="orderListContent">
                        {
                            this.state.data.length > 0 ?
                                this.state.data.map((item, index) => {
                                    return (
                                        <OrderItem data={item} key={index}
                                                   click={(path, customer_id) => this.handleOnClick(path, customer_id)}/>
                                    )
                                }) : <div style={{textAlign: 'center', marginTop: '40px'}}>暂无数据</div>
                        }
                    </div>
                </Spin>
                <div className="bottomContainer" style={{position: 'fixed', bottom: 0}}>
                    <div className="bottomLogo" onClick={() => this.handleDrop('/addOrder')}>
                        <div>
                            <img alt="null" src={ss} style={{width: '24px', height: '24px'}}/>
                        </div>
                        <div className="bottomLogoTitle">扫一扫</div>
                    </div>
                    <div className="bottomLogo" onClick={() => this.handleDropMap('/navigation/1')}>
                        <div>
                            <img alt="null" src={map} style={{width: '24px', height: '24px'}}/>
                        </div>
                        <div className="bottomLogoTitle">查看地图</div>
                    </div>
                    <div className="bottomLogo">
                        <div>
                            <img alt="null" src={during} style={{width: '24px', height: '24px'}}/>
                        </div>
                        <div className="bottomLogoTitle LogoTitleChoose">配送中</div>
                    </div>
                    <div className="bottomLogo" onClick={() => this.handleDrop('/finishOrder')}>
                        <div>
                            <img alt="null" src={finish} style={{width: '24px', height: '24px'}}/>
                        </div>
                        <div className="bottomLogoTitle">已配送</div>
                    </div>
                </div>
            </div>
        )
    };

    componentDidMount() {
        this.handleGetOrderList();
    };

    /**
     * 根据负责人id查询配送中订单
     * @returns {Promise.<void>}
     */
    async handleGetOrderList() {
        this.setState({loading: true});
        let employee_id = app.getData('employee_id');
        let result = await app.post(order.QUERY_OUTPUTGROUPBYCUSTOMER, {employee_id: employee_id});
        if (result.code === 1) {
            let data = result.data.dataSet;
            this.setState({data, loading: false});
        } else {
            this.setState({data: [], loading: false});
        }
    };

    /**
     * 跳转到已配送页面
     * @param path
     */
    handleDrop(path) {
        this.props.history.push(config.path + path);
    };

    /**
     * 跳转到查看地图页面
     * @param path
     */
    handleDropMap(path) {
        this.props.history.push(config.path + path);
    };

    /**
     * 跳转到查看详情列表页面
     * @param path
     * @param customer_id
     */
    handleOnClick(path, customer_id) {
        app.setData('customer_id', customer_id);
        this.props.history.push(config.path + path);
    };

    /**
     * 处理页面返回事件
     */
    handleBack(){
        this.props.history.push(config.path + '/operation');
    }
}

class OrderItem extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        let {
            customer_id, customer_name, customer_phone, customer_x, customer_y, output_need_money, output_money,
            output_real_money, output_logistics_type, output_stop_position, output_customer_car,logistics_name,
            logistics_address,logistics_phone,logistics_x,logistics_y
        } = this.props.data;
        if (output_money == null || output_money == undefined) {
            output_money = 0;
        }
        if (output_real_money == null || output_real_money == undefined) {
            output_real_money = 0;
        }
        if (output_need_money == null || output_need_money == undefined) {
            output_need_money = 0;
        }
        let type = output_logistics_type;
        return (
            <Row className="allDeliveryContainer">
                <Row className="orderItem">
                    <Row style={{height: '30px', lineHeight: '30px'}}>
                        <Col className="orderItemNumber" xs={24} md={8} lg={6}>客户名：{customer_name}</Col>
                        <Col className="orderPerson" xs={24} md={8} lg={6}>联系方式：{customer_phone}</Col>
                    </Row>
                    {
                        type == 1 ?
                            <Row style={{height: '30px', lineHeight: '30px'}}>
                                <Col className="orderPerson" xs={12} md={8} lg={6}>客户车牌号：{output_customer_car}</Col>
                                <Col className="orderPerson" xs={12} md={8} lg={6}>停靠位置：{output_stop_position}</Col>
                            </Row>
                            : ''
                    }
                    {
                        type==2?
                            <Row style={{height: '30px', lineHeight: '30px'}}>
                                <Col className="orderPerson" xs={24} md={8} lg={6}>托运公司：{logistics_name}</Col>
                                <Col className="orderPerson" xs={24} md={8} lg={6}>托运电话：{logistics_phone}</Col>
                                <Col className="orderPerson" xs={24} md={8} lg={6}>托运地址：{logistics_address}</Col>
                            </Row>:
                            <Row style={{height: '30px', lineHeight: '30px'}}>
                                <Col className="orderNotPay" xs={8} md={8} lg={6}>应收款：{output_need_money}元</Col>
                                <Col className="orderNotPay" xs={8} md={8} lg={6}>待收款：{output_money}元</Col>
                                <Col className="orderIsPay" xs={8} md={8} lg={6}>预付款：{output_real_money}元</Col>
                            </Row>
                    }
                </Row>
                {
                    type == 0 ?
                        <Row style={{marginTop: '8px'}}>
                            <Col span={12} className="btnItem"
                                 onClick={() => this.handleDrop('/navigation/0', customer_id, customer_x, customer_y,customer_name)}>导航</Col>
                            <Col span={12} className="btnItem"
                                 onClick={() => this.handleDetail('/deliveryOrderList', customer_id)}>查看订单</Col>
                        </Row> : ''
                }
                {
                    type==2 ?
                        <Row style={{marginTop: '8px'}}>
                            <Col span={12} className="btnItem"
                                 onClick={() => this.handleDrop('/navigation/0', customer_id, logistics_x, logistics_y,logistics_name)}>导航</Col>
                            <Col span={12} className="btnItem"
                                 onClick={() => this.handleDetail('/deliveryOrderList', customer_id)}>查看订单</Col>
                        </Row> : ''
                }
                {
                    type == 1 ?
                        <Row style={{marginTop: '8px'}}>
                            <Col span={24} className="btnItem"
                                 onClick={() => this.handleDetail('/deliveryOrderList', customer_id)}>查看订单</Col>
                        </Row> : ''
                }
            </Row>
        )
    };

    /**
     * 跳转到导航页面
     * @param path
     * @param customer_id
     * @param customer_x
     * @param customer_y
     */
    handleDrop(path, customer_id, customer_x, customer_y,customer_name) {
        app.setData('customer_x', customer_x);
        app.setData('customer_y', customer_y);
        app.setData('customer_name', customer_name);
        this.props.click(path, customer_id);
    };

    /**
     * 跳转到详情列表页面
     * @param path
     * @param customer_id
     */
    handleDetail(path, customer_id) {
        this.props.click(path, customer_id);
    }
}

export default DeliveryOrder;